import "./index.scss";
import { ReactNode } from "react";
import TButton from "../Botton";

interface ModelProps {
  // 是否显示右上角的关闭按钮
  closable?: boolean;
  // 取消按钮文字
  cancelText?: string;
  // 确定按钮 loading
  confirmLoading?: boolean;
  // 是否支持键盘 esc 关闭
  keyboard?: boolean;
  // 是否显示遮罩层
  mask?: boolean;
  // 确认按钮文字
  okText?: string;
  // 标签
  title?: ReactNode | string;
  // 对话框是否可见
  open: boolean;
  // 确认按钮回调
  onOk?: () => void;
  // 取消按钮回调
  onCancel?: () => void;
  // 插槽
  children: ReactNode;
}

export default function Model(props: ModelProps) {
  const {
    cancelText = "取消",
    mask = true,
    okText = "确认",
    title,
    open,
    onOk,
    onCancel,
    children,
  } = props;

  return (
    <>
      <div className={`${mask ? "mask" : ""} ${open ? "" : "visible"}`}>
        <div className="model">
          <div className="model-title">{title ? title : "标题"} </div>
          <div className="model-content">{children}</div>
          <div className="model-footer">
            <TButton type="primary" onClick={onOk}>
              {okText}
            </TButton>
            <TButton onClick={onCancel}>{cancelText}</TButton>
          </div>
        </div>
      </div>
    </>
  );
}
